<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>layui表格重载-动态表头</title>
  <link rel="stylesheet" href="../../assets/layui/css/layui.css">
</head>

<body>
  <div style="width: 80%; padding: 20px; margin: 0px auto;">
    <div class="layui-form" lay-filter="searchForm">
      <div class="layui-form-item">
        <label class="layui-form-label">模块名称</label>
        <div class="layui-input-block">
          <select name="module" lay-filter="module">
            <option value="">请选择模块</option>
            <option value="news">文章</option>
            <option value="bbs">论坛</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchForm">查询数据</button>
        </div>
      </div>
    </div>
    <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
  </div>
  <script src="../../assets/layui/layui.js"></script>
  <script>
    layui.use(['table', 'form', 'layer', 'jquery'], function () {
      var table = layui.table
        , form = layui.form
        , layer = layui.layer
        , $ = layui.jquery;
      //模块类型
      var moduleType = 'news';

      //设置默认模块
      form.val('searchForm', {
        module: moduleType
      });

      //展示已知数据
      table.render({
        elem: '#dataTable'
        , cols: []
        , data: []
        , skin: 'line' //表格风格
        , even: true
        , page: true //是否显示分页
        , limits: [5, 7, 10]
        , limit: 5 //每页默认显示的数量
      });
      //初始化重载
      reloadTable();

      form.on('submit(searchForm)', function (data) {
        //获取选择的模块
        moduleType = data.field.module;
        //根据选择的模块重载表格
        reloadTable();

        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });

      //重载表格
      function reloadTable() {
        if (moduleType === '') {
          layer.alert('请先选择模块', { icon: 5 });
          return;
        }

        var cols = [];
        var data = [];
        //表头获取方式一，静态数据
        switch (moduleType) {
          case 'news':
            cols = [
              { field: 'title', title: '主题' },
              { field: 'thumb', title: '缩略图' },
              { field: 'keywords', title: '关键字' },
              { field: 'description', title: '描述' }
            ];
            break;
          case 'bbs':
            cols = [
              { field: 'dxld3', title: '多选联动3' },
              { field: 'content', title: '内容' },
              { field: 'time', title: '时间' },
              { field: 'shijian1', title: '时间1' },
              { field: 'riqi', title: '日期' }
            ];
            break;
        }
        //表头获取方式二，动态获取
        // cols = getFields();
        data = getData();

        table.reload('dataTable', {
          cols: [cols],
          data: data
        });
      }

      //同步方式获取字段
      function getFields() {
        var cols = [];
        //同步方式获取数据
        $.ajax({
          //请求方式为get
          type: "GET",
          //json文件位置
          url: `../../assets/json/${moduleType}-字段.json`,
          //是否异步
          async: false,
          //返回数据格式为json
          dataType: "json",
          //请求成功完成后要执行的方法
          success: function (res) {
            cols = res.data;
          }
        });
        return cols;
      }

      //同步方式获取数据
      function getData() {
        var data = [];
        //同步方式获取数据
        $.ajax({
          //请求方式为get
          type: "GET",
          //json文件位置
          url: `../../assets/json/${moduleType}-数据.json`,
          //是否异步
          async: false,
          //返回数据格式为json
          dataType: "json",
          //请求成功完成后要执行的方法
          success: function (res) {
            data = res.data;
          }
        });
        return data;
      }
    });
  </script>
</body>

</html>